<template>
    <div class="push-page">
		<div class="push-box">
			<div class="push-t flex f-be f-mi marg-B2">
				<div class="fs-16 fw-5">
					推送设置
				</div>
			</div>
			<div class="push-area marg-B2">
				<div class="flex f-be f-mi marg-B2" @click="clueClick">
					<div class="fs-16 fw-6">线索区域</div>
					<div class="t-three" style="cursor: pointer;">
                        <span>添加</span>
                        <i class="el-icon-arrow-right"></i>
                    </div>
				</div>
				<div class="flex f-wp" v-if="cityList.length>0">
					<div class="items" v-for="(item,index) in cityList" :key="index">
						<span>{{item.city_title}}</span>
						<i @click="cityDel(item)" class="close-icon el-icon-error"></i>
					</div>
				</div>
				<div class="t-cen" v-else>
					<img style="width: 100px;" src="../assets/images/no-data.png"/>
					<p class="t-eight">暂无数据</p>
				</div>
			</div>
			<div class="push-list">
				<div class="flex f-be f-mi marg-B2" @click="caseClick">
					<div class="fs-16 fw-6">案件类型</div>
					<div class="t-three" style="cursor: pointer;">
                        <span>添加</span>
                        <i class="el-icon-arrow-right"></i>
                    </div>
				</div>
				<div class="flex f-wp" v-if="caseList.length>0">
					<div class="items" v-for="(item,index) in caseList" :key="index">
						<span>{{item.category_title}}</span>
						<i @click="categoryDel(item)" class="close-icon el-icon-error"></i>
					</div>
				</div>
				<div class="t-cen" v-else>
					<img style="width: 100px;" src="../assets/images/no-data.png"/>
					<p class="t-eight">暂无数据</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {request} from "@/assets/js/utils/request"
export default {
    data() {
        return{
            swiVal: false,
			caseList: [],
			cityList: []
        }
    },
	created() {
		this.initData()
	},
    methods: {
		categoryDel(params) {
			const formData = new FormData();
            formData.append('category_id',params.category_id);
			request({
				url: `/user/push/category-delete`,
				method: 'POST',
				data: formData
			}).then(res => {
				if(res.code == 200) {
					this.$message('已删除');
					this.initData()
				} else {
					this.$message.error(res.message);
				}
			})
		},
		cityDel(params) {
			const formData = new FormData();
            formData.append('city_id',params.city_id);
			request({
				url: `/user/push/city-delete`,
				method: 'POST',
				data: formData
			}).then(res => {
				if(res.code == 200) {
					this.$message('已删除');
					this.initData()
				} else {
					this.$message.error(res.message);
				}
			})
		},
        caseClick() {
			this.$router.push({
				path: '/caseType'
			})
        },
        clueClick() {
			this.$router.push({
				path: '/clueCity'
			})
        },
		initData() {
			// 线索区域
			request({
				url: `/user/push/city-list`,
				method: 'GET'
			}).then(res => {
				if(res.code == 200) {
					this.cityList = res.data.list || []
				} else {
					this.$message.error(res.message);
				}
			})
			// 案件类型
			request({
				url: `/user/push/category-list`,
				method: 'GET'
			}).then(res => {
				if(res.code == 200) {
					this.caseList = res.data.list || []
				}
			})
		}
    }
}
</script>
<style lang="less" scoped>
    .push-page{
		padding: 20px;
		border-radius: 8px;
		.push-box{
			padding: 20px;
			margin: 0 auto;
			// width: 780rpx;
			// height: 309px;
			opacity: 1;
			border-radius: 8px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 6px  rgba(0, 0, 0, 0.2);
			.push-t{
				padding-bottom: 10px;
				border-bottom: 2rpx solid #E5E5E5;
			}
			.push-area{
				padding-bottom: 20px;
				border-bottom: 2rpx solid #E5E5E5;
				.items{
					width: 120px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					position: relative;
					color: #383838;
					margin: 10px;
					// padding: 3px 20px;
					border-radius: 30px;
					background: rgba(232, 232, 232, 1);					
				}
				.area-active{
					color: #fff;
					background: rgba(42, 130, 228, 1);
				}
			}
			.push-list{
				.items{
					width: 120px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					position: relative;
					color: #383838;
					margin: 10px;
					border-radius: 30px;
					background: rgba(232, 232, 232, 1);					
				}
				.case-active{
					color: #fff;
					background: rgba(42, 130, 228, 1);
				}
			}
			.close-icon{
				position: absolute;
				right: 5px;
				top: 5px;
				font-size: 20px;
			}
		}
	}
</style>